<template>
	<view class="header">
		<view class="search">
			<image src="../../static/fundChannelIcon/路径 25.png" mode=""></image>
			<input type="text" value="" placeholder="搜索相关内容" />
		</view>

		<view class="main">
			<view class="nav">
				<navigator url="" class="navBox">
					<image src="../../static/fundChannelIcon/组 4780.png" mode=""></image>
					<view class="navFont">基金排行</view>
				</navigator>
				<navigator url="" class="navBox">
					<image src="../../static/fundChannelIcon/组 4781.png" mode=""></image>
					<view class="navFont">人气热销</view>
				</navigator>
				<navigator url="" class="navBox">
					<image src="../../static/fundChannelIcon/组 4782.png" mode=""></image>
					<view class="navFont">投顾组合</view>
				</navigator>
				<navigator url="" class="navBox">
					<image src="../../static/fundChannelIcon/组 4783.png" mode=""></image>
					<view class="navFont">新发基金</view>
				</navigator>
				<navigator url="" class="navBox">
					<image src="../../static/fundChannelIcon/组 4784.png" mode=""></image>
					<view class="navFont">固守+</view>
				</navigator>
				<navigator url="" class="navBox">
					<image src="../../static/fundChannelIcon/组 2768.png" mode=""></image>
					<view class="navFont">投资风向</view>
				</navigator>
				<navigator url="" class="navBox">
					<image src="../../static/fundChannelIcon/组 2769.png" mode=""></image>
					<view class="navFont">货币基金</view>
				</navigator>
				<navigator url="" class="navBox">
					<image src="../../static/fundChannelIcon/组 4787.png" mode=""></image>
					<view class="navFont">指数基金</view>
				</navigator>
				<navigator url="" class="navBox">
					<image src="../../static/fundChannelIcon/组 4786.png" mode=""></image>
					<view class="navFont">主体投资</view>
				</navigator>
				<navigator url="" class="navBox">
					<image src="../../static/fundChannelIcon/组 4785.png" mode=""></image>
					<view class="navFont">目标盈</view>
				</navigator>
			</view>
			<view class="banner">
				<image src="../../static/fundChannelIcon/蒙版组 32.png" mode=""></image>
			</view>
			<view class="container">
				<view class="conBox">
					<view style="display: flex;">
						<view class="conBox1"></view>
						<view class="conBox2">
							稳健优选
						</view>
						<view class="conBox3">| 适合新手投资 稳中求进</view>
					</view>
					<navigator url="" class="conBox4">></navigator>
				</view>
				<view class="conCase">
					<uni-segmented-control :current="current1" :values="items[0]" @clickItem="onClickItem1"
						styleType="button" activeColor="#3476f1"></uni-segmented-control>
					<view class="content">
						<view v-show="current1 === 0">
							<view style="box-shadow: 0rpx 0rpx 20rpx 5rpx  #ddd;;padding:30rpx;padding-top: 15rpx;">
								<navigator url="/pages/fundDetails/fundDetails" class="content1" >
									<view class="content-1">
										<image src="../../static/fundChannelIcon/蒙版组 20.png" mode=""></image>
										<view>
											<view class="content-11">
												11.76%
											</view>
											<view class="content-12">
												近一年
											</view>
										</view>
									</view>
									<view class="content-2">
										<view class="content-21">
											股债双利 理财升级
										</view>
										<view class="content-22">
											汇添富双利券A
										</view>
									</view>
								</navigator>
								<navigator url="" class="content1">
									<view class="content-1">
										<image src="../../static/fundChannelIcon/蒙版组 20.png" mode=""></image>
										<view>
											<view class="content-11">
												18.97%
											</view>
											<view class="content-12">
												近一年
											</view>
										</view>
									</view>
									<view class="content-2">
										<view class="content-21">
											攻守有道
										</view>
										<view class="content-22">
											中银多策略灵活配置混合A
										</view>
									</view>
								</navigator>
								<navigator url="" class="content1">
									<view class="content-1">
										<image src="../../static/fundChannelIcon/蒙版组 20.png" mode=""></image>
										<view>
											<view class="content-11">
												8.74%
											</view>
											<view class="content-12">
												近一年
											</view>
										</view>
									</view>
									<view class="content-2">
										<view class="content-21">
											理财新手首选
										</view>
										<view class="content-22">
											广发趋势优选灵活配置A
										</view>
									</view>
								</navigator>
							</view>
						</view>
						<view v-show="current1 === 1">
							选项卡2的内容
						</view>
						<view v-show="current1 === 2">
							选项卡3的内容
						</view>
					</view>
				</view>
			</view>
			<view class="container">
				<view class="conBox">
					<view style="display: flex;">
						<view class="conBox1"></view>
						<view class="conBox2">
							收益进取
						</view>
						<view class="conBox3">| 收益进阶，历史业绩亮眼</view>
					</view>
					<navigator url="" class="conBox4">></navigator>
				</view>
				<view class="conCase">
					<uni-segmented-control :current="current2" :values="items[1]" @clickItem="onClickItem2"
						styleType="button" activeColor="#3476f1"></uni-segmented-control>
					<view class="content">
						<view v-show="current2 === 0">
							<view style="box-shadow: 0rpx 0rpx 20rpx 5rpx  #ddd;padding:30rpx;padding-top: 15rpx;">
								<navigator url="" style="display: flex;border-bottom: 2rpx solid #F0F0F0; margin-top: 15rpx;padding-bottom: 15rpx;">
									<image src="../../static/fundChannelIcon/蒙版组 26.png" mode=""
										style="width: 98rpx; height: 142rpx; padding-top: 30rpx;"></image>
									<view class="case1">
										<view class="case-1">
											<view class="case-11">
												投研副总挂帅 | 聚集新能源
											</view>
											<view class="case-12">
												中欧先进制造股票C
											</view>
										</view>
										<view class="case-2">
											<view class="case-21">
												<view class="first">
													95.46%
												</view>
												<view class="two">
													近一年
												</view>
											</view>
											<view class="case-21">
												<view class="three">
													167.72%
												</view>
												<view class="four">
													近三年
												</view>
											</view>
											<view class="case-21">
												<view class="three">
													154.87%
												</view>
												<view class="four">
													成立以来
												</view>
											</view>
										</view>
									</view>
								</navigator>
								<navigator url="" style="display: flex; border-bottom: 2rpx solid #F0F0F0;margin-top: 15rpx;padding-bottom: 15rpx;">
									<image src="../../static/fundChannelIcon/蒙版组 26.png" mode=""
										style="width: 98rpx; height: 142rpx;padding-top: 30rpx;"></image>
									<view class="case1">
										<view class="case-1">
											<view class="case-11">
												消费 | 四年获金牛萧楠
											</view>
											<view class="case-12">
												易方达消费行业股票
											</view>
										</view>
										<view class="case-2">
											<view class="case-21">
												<view class="first">
													80.36%
												</view>
												<view class="two">
													近一年
												</view>
											</view>
											<view class="case-21">
												<view class="three">
													119.29%
												</view>
												<view class="four">
													近三年
												</view>
											</view>
											<view class="case-21">
												<view class="three">
													416.20%
												</view>
												<view class="four">
													成立以来
												</view>
											</view>
										</view>
									</view>
								</navigator>
								<navigator url="" style="display: flex; border-bottom: 2rpx solid #F0F0F0 ;margin-top: 15rpx;padding-bottom: 15rpx;">
									<image src="../../static/fundChannelIcon/蒙版组 26.png" mode=""
										style="width: 98rpx; height: 142rpx;padding-top: 30rpx;"></image>
									<view class="case1">
										<view class="case-1">
											<view class="case-11">
												2020翻倍基 | 掘金港股洼地
											</view>
											<view class="case-12">
												南方香港成长灵活配置混合
											</view>
										</view>
										<view class="case-2">
											<view class="case-21">
												<view class="first">
													107.78%
												</view>
												<view class="two">
													近一年
												</view>
											</view>
											<view class="case-21">
												<view class="three">
													142.45%
												</view>
												<view class="four">
													近三年
												</view>
											</view>
											<view class="case-21">
												<view class="three">
													161.60%
												</view>
												<view class="four">
													成立以来
												</view>
											</view>
										</view>
									</view>
								</navigator>
							</view>							
						</view>
						<view v-show="current2 === 1">
							选项卡5的内容
						</view>
						<view v-show="current2 === 2">
							选项卡6的内容
						</view>
					</view>
				</view>
			</view>
			<view class="container">
				<view class="conBox">
					<view style="display: flex;">
						<view class="conBox1"></view>
						<view class="conBox2">
							新发基金
						</view>
					</view>
					<navigator url="" class="conBox4">></navigator>
				</view>
				<view class="conCase">
					<swiper :indicator-dots="true">
						<swiper-item>							
								<navigator url="" class="newFunds">
									<view class="newFunds0">
										<image src="../../static/fundChannelIcon/矩形 1050.png" mode=""></image>
										<view class="newFunds-01">
											正在售卖
										</view>
									</view>
									<view class="newFunds1">
										华夏科创50ETF
									</view>
									<view class="newFunds2">
										<view class="newFunds-21">
											首批科创链接
										</view>
										<view class="newFunds-22">
											指数投资专家
										</view>
									</view>
									<view class="newFunds3">
										<view class="newFunds-31">
											<image src="../../static/fundChannelIcon/组 4788.png" mode=""></image>
											<span>杨宇宁</span>
										</view>
										<view class="newFunds-32">
											认购截止日 2021-4-6
										</view>
									</view>
								</navigator>							
						</swiper-item>
						<swiper-item>							
								<navigator url="" class="newFunds">
									<view class="newFunds0">
										<image src="../../static/fundChannelIcon/矩形 1050.png" mode=""></image>
										<view class="newFunds-01">
											正在售卖
										</view>
									</view>
									<view class="newFunds1">
										鹏杨景源一年
									</view>
									<view class="newFunds2">
										<view class="newFunds-21">
											鹏杨副总挂帅
										</view>
										<view class="newFunds-22">
											指数投资专家
										</view>
									</view>
									<view class="newFunds3">
										<view class="newFunds-31">
											<image src="../../static/fundChannelIcon/组 4789.png" mode=""></image>
											<span>付百惠</span>
										</view>
										<view class="newFunds-32">
											认购截止日 2021-4-6
										</view>
									</view>
								</navigator>							
						</swiper-item>
					</swiper>
				</view>
			</view>	
			<view class="container">
				<view class="conBox">
					<view style="display: flex;">
						<view class="conBox1"></view>
						<view class="conBox2">
							资讯要闻
						</view>
					</view>
					<navigator url="" class="conBox4">></navigator>
				</view>
				<view class="conCase">
					<view class="realTimeInfo"> 
						<navigator url="" class="realTimeInfo1">
							<view class="realTimeInfo-1">
								<view class="realTimeInfo-11">
									来了来了！ 科创50ETF链接基金重磅新发
								</view>
								<view class="realTimeInfo-12">
									翔瑞金融资讯 1833浏览
								</view>
							</view>
							<image src="../../static/fundChannelIcon/蒙版组 19.png" mode=""></image>
						</navigator>
						<navigator url="" class="realTimeInfo1" style="margin-top: 15rpx;">
							<view class="realTimeInfo-1">
								<view class="realTimeInfo-11">
									牛没了？泸指跌幅0.17%，保险军工类基金护盘
								</view>
								<view class="realTimeInfo-12">
									财经小白说 1865浏览
								</view>
							</view>
							<image src="../../static/fundChannelIcon/蒙版组 34.png" mode=""></image>
						</navigator>
						<navigator url="" class="realTimeInfo1" style="margin-top: 15rpx;">
							<view class="realTimeInfo-1">
								<view class="realTimeInfo-11">
									大波动给基金敲了一次警钟：指数出现探底结构 后半周看反弹
								</view>
								<view class="realTimeInfo-12">
									观察员老孙 3300浏览
								</view>
							</view>
							<image src="../../static/fundChannelIcon/蒙版组 35.png" mode=""></image>
						</navigator>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniSegmentedControl from '../../uni_modules/uni-segmented-control/components/uni-segmented-control/uni-segmented-control.vue'
	export default {
		components: {
			uniSegmentedControl
		},
		data() {
			return {
				items: [
					['稳中进取', '安稳增值', '活期理财'],
					['绩优股基', '精选指数', '布局海外']
				],
				current1: 0,
				current2:0
			}
		},
		methods: {
			onClickItem1(e) {
				if (this.current1 !== e.currentIndex) {
					this.current1 = e.currentIndex
				}
			},
			onClickItem2(e) {
				if (this.current2 !== e.currentIndex) {
					this.current2 = e.currentIndex
				}
			}
			
		}
	}
</script>

<style scoped>
	.header {
		height: 240rpx;
		width: 100%;
		background-color: #3476f1;
		border-radius: 0 0 50rpx 50rpx;
		position: relative;
	}

	.header .search {
		height: 60rpx;
		width: 700rpx;
		background-color: #ffffff;
		margin: 0 auto;
		display: flex;
		border-radius: 30rpx;
	}

	.header .search image {
		width: 26rpx;
		height: 26rpx;
		margin-top: 17rpx;
		margin-left: 270rpx;
	}

	.header .search input {
		margin-top: 7rpx;
		margin-left: 16rpx;
		text-align: left;
		font-size: 24rpx;
	}

	.header .main {
		width: 700rpx;
		border-radius: 10rpx;
		background-color: #ffffff;
		position: absolute;
		top: 100rpx;
		left: 24rpx;
		z-index: 10;
		text-align: center;
	}

	.header .main .nav {
		width: 700rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 40rpx;
		padding-top: 14rpx;
		box-sizing: border-box;
	}

	.header .main .nav .navBox {
		width: 120rpx;
		height: 100rpx;
		text-align: center;
		margin-top: 26rpx;
	}

	.header .main .nav .navBox image {
		width: 48rpx;
		height: 48rpx;
	}

	.header .main .nav .navBox .navFont {
		font-size: 24rpx;
	}

	.header .main .banner image {
		width: 700rpx;
		height: 202rpx;
	}

	.header .main .container {
		width: 700rpx;
		margin-top: 40rpx;
	}

	.header .main .container .conBox {
		display: flex;
		justify-content: space-between;
	}

	.header .main .container .conBox .conBox1 {
		width: 10rpx;
		background-color: #007AFF;
		border-radius: 5rpx;
	}

	.header .main .container .conBox .conBox2 {
		margin-left: 10rpx;
		font-size: 44rpx;
	}

	.header .main .container .conBox .conBox3 {
		margin-left: 10rpx;
		color: #ccc;
		padding-top: 15rpx;
		box-sizing: border-box;
	}

	.header .main .container .conBox .conBox4 {
		font-size: 44rpx;
		color: #ccc;
	}

	.header .main .container .conCase {
		margin-top: 40rpx;
	}

	.header .main .container .conCase .content {
		margin-top: 18rpx;
	}

	.header .main .container .conCase .content .content1 {
		height: 100rpx;
		overflow: hidden;
		margin-top: 15rpx;
		padding-bottom: 15rpx;
		border-bottom: 2rpx solid #F0F0F0;
		display: flex;
		justify-content: space-between;
	}

	.header .main .container .conCase .content .content1 .content-1 {
		display: flex;
	}

	.header .main .container .conCase .content .content1 .content-1 image {
		width: 70rpx;
		height: 140rpx;
	}

	.header .main .container .conCase .content .content1 .content-1 .content-11 {
		color: #fa8080;
		font-size: 40rpx;
		margin-left: 20rpx;
	}

	.header .main .container .conCase .content .content1 .content-2 {
		width: 380rpx;
		text-align: left;
	}

	.header .main .container .conCase .content .content1 .content-2 .content-21 {
		font-size: 40rpx;
	}

	.header .main .container .conCase .content .content1 .content-2 .content-22 {
		color: #ccc;
	}

	.header .main .container .conCase .content .case1 {
		text-align: left;
		margin-left: 20rpx;
		width: 550rpx;
	}

	.header .main .container .conCase .content .case1 .case-1 .case-11 {
		font-size: 40rpx;
	}

	.header .main .container .conCase .content .case1 .case-1 .case-12 {
		color: #ccc;
		margin-top: 14rpx;
	}

	.header .main .container .conCase .content .case1 .case-2 {
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
	}

	.header .main .container .conCase .content .case1 .case-2 .case-21 {
		text-align: center;
		width: 150rpx;
	}

	.header .main .container .conCase .content .case1 .case-2 .case-21 .first {
		color: #fa8080;
		font-size: 40rpx;
	}

	.header .main .container .conCase .content .case1 .case-2 .case-21 .three {
		font-size: 40rpx;
	}

	.header .main .container .conCase .content .case1 .case-2 .case-21 .four {
		color: #333333;
	}
	.header .main .container .conCase .newFunds{
		box-shadow: 0rpx 0rpx 20rpx 5rpx  #ddd;
		width: 516rpx;
		text-align: left;
		padding-left: 30rpx;
		padding-bottom: 30rpx;
	}
	.header .main .container .conCase .newFunds .newFunds0{
		position: relative;
	}
	.header .main .container .conCase .newFunds .newFunds0 image{
		width: 94rpx;
		height: 36rpx;
		margin-left: 420rpx;
	}
	.header .main .container .conCase .newFunds .newFunds0 .newFunds-01{
		position: absolute;
		top:0rpx;
		left: 430rpx;
		font-size: 20rpx;
		color: #ffffff;
	}
	.header .main .container .conCase .newFunds .newFunds1{
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
	}
	.header .main .container .conCase .newFunds .newFunds2{
		display: flex;
		margin-top: 14rpx;
	}
	.header .main .container .conCase .newFunds .newFunds2 .newFunds-21{
		width: 140rpx;
		height: 34rpx;
		text-align: center;
		line-height: 34rpx;
		background-color: #eaf1fe;
		color: #3476f1;
		font-size: 20rpx;
	}
	.header .main .container .conCase .newFunds .newFunds2 .newFunds-22{
		width: 140rpx;
		height: 34rpx;
		text-align: center;
		line-height: 34rpx;
		color: #be7f22;
		background-color: #f9f2e8;
		font-size: 20rpx;
		margin-left: 10rpx;
	}
	.header .main .container .conCase .newFunds .newFunds3{
		margin-top: 32rpx;
		display: flex;
		justify-content: space-between;
	}
	.header .main .container .conCase .newFunds .newFunds3 .newFunds-31 image{
		width: 54rpx;
		height: 54rpx;
		vertical-align: middle;
	}
	.header .main .container .conCase .newFunds .newFunds3 .newFunds-31 span{
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
		vertical-align: middle;
		margin-left: 12rpx;
	}
	.header .main .container .conCase .newFunds .newFunds3 .newFunds-32{
		font-size: 28rpx;
		color: #ccc;
		margin-top: 10rpx;
		margin-right: 30rpx;
	}
	.header .main .container .conCase .realTimeInfo{
		box-shadow: 0rpx 0rpx 20rpx 5rpx  #ddd;
		padding: 30rpx;
	}
	.header .main .container .conCase .realTimeInfo .realTimeInfo1{
		padding-bottom: 15rpx ;
		border-bottom: 2rpx solid #F0F0F0;
		display: flex;
		justify-content: space-between;
	}
	.header .main .container .conCase .realTimeInfo .realTimeInfo1 .realTimeInfo-1{
		text-align: left;
		width: 390rpx;
	}
	.header .main .container .conCase .realTimeInfo .realTimeInfo1 .realTimeInfo-1 .realTimeInfo-11{
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
	}
	.header .main .container .conCase .realTimeInfo .realTimeInfo1 .realTimeInfo-1 .realTimeInfo-12{
		font-size: 28rpx;
		color: #ccc;
		margin-top: 40rpx;
	}
	.header .main .container .conCase .realTimeInfo .realTimeInfo1 image{
		width: 208rpx;
		height: 154rpx;
	}
</style>
